<!doctype html>
<html lang="en">
  <head>
    <th:block th:include="include :: desk-header" />
    <style>
      .form-horizontal .control-label{
        text-align: left;
      }
    </style>
  </head>

  <body>

  <th:block th:include="include :: desk-top" />

    <div class="container-fluid">
      <div class="row">

        <th:block th:include="include :: desk-menu" />

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

          <h2 class="sub-header">编辑数据源</h2>
          <div class="table-responsive">
            <div class="panel-body">

              <form action="/index/" method="post" id="form" class="form-horizontal">
                <input type="hidden" name="id"  th:value="${id}">

                <div class="form-group">
                  <label for="title" class="col-sm-2 control-label">数据源名称</label>
                  <div class="col-sm-10">
                    <input type="text" name="title" class="form-control" id="title" th:value="${title}" placeholder="数据源名称" required>
                  </div>
                </div>

                <div class="form-group">
                  <label for="url" class="col-sm-2 control-label">数据源地址</label>
                  <div class="col-sm-10">
                    <input type="text" name="url" class="form-control" id="url" th:value="${url}" placeholder="数据源地址" required>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-2 control-label">获取单位数据规则</label>
                  <div class="col-sm-10 form-inline">
                    <div class="row">
                      <div class="col-sm-10">
                    <input type="text" name="regex" id="regex" style="width: 100%;" class="form-control" th:value="${htmlRegex.getCell()}" placeholder="获取单位数据规则" required>
                      </div>
                      <div class="col-sm-2">
                        <select name="charset" class="form-control" style="width: 100%;">
                            <option th:selected="${htmlRegex.getCharset()=='utf-8'}"  value="utf-8">utf-8</option>
                            <option th:selected="${htmlRegex.getCharset()=='gbk'}" value="gbk">gbk</option>
                            <option th:selected="${htmlRegex.getCharset()=='gb2312'}" value="gb2312">gb2312</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-2 control-label">获取标题规则</label>
                  <div class="col-sm-10 form-inline">
                    <input type="text" name="title_name" class="form-control" th:value="${htmlRegex.getTitle_name()}" placeholder="对象规则">
                    <input type="text" name="title_value" class="form-control" th:value="${htmlRegex.getTitle_value()}" placeholder="内容规则">
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-2 control-label">获取地址规则</label>
                  <div class="col-sm-10 form-inline">
                    <input type="text" name="url_name" class="form-control" th:value="${htmlRegex.getUrl_name()}" placeholder="对象规则" required>
                    <input type="text" name="url_value" class="form-control" th:value="${htmlRegex.getUrl_value()}" placeholder="内容规则" required>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-2 control-label">获取时间规则</label>
                  <div class="col-sm-10 form-inline">
                    <input type="text" name="time_name" class="form-control" th:value="${htmlRegex.getTime_name()}" placeholder="对象规则" required>
                    <input type="text" name="time_value" class="form-control" th:value="${htmlRegex.getTime_value()}" placeholder="内容规则" required>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-2 control-label">获取图片规则</label>
                  <div class="col-sm-10 form-inline">
                    <input type="text" name="img_name" class="form-control" th:value="${htmlRegex.getImg_name()}" placeholder="对象规则" required>
                    <input type="text" name="img_value" class="form-control" th:value="${htmlRegex.getImg_value()}" placeholder="内容规则" required>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-2 control-label">获取简介规则</label>
                  <div class="col-sm-10 form-inline">
                    <input type="text" name="remark_name" class="form-control" th:value="${htmlRegex.getRemark_name()}" placeholder="对象规则" required>
                    <input type="text" name="remark_value" class="form-control" th:value="${htmlRegex.getRemark_value()}" placeholder="内容规则" required>
                  </div>
                </div>

                <button type="button" class="btn btn-primary">提取数据</button>
              </form>

          </div>

            <div class="col-sm-12 col-md-12" id="result"></div>

        </div>
      </div>
    </div>
    </div>


    <th:block th:include="include :: desk-footer" />

      <script>
        $(function (){
          $(".btn").click(function (){
            var url = $("#url").val();
            var regex = $("#regex").val();
            if(url=="")return alert("请输入数据源地址");
            if(regex=="")return alert("请输入数据获取规则");

            $(this).attr("disabled",true);
            var param = {};
            param.url = url;
            param.htmlRegex = JSON.stringify(getParse());
            $.post("/sites/gethref",param,function (res) {
              if(0==res.code){
                $("#result").html("<p style='color:red;font-weight: bold;'>解析失败："+res.msg+"</p>");
                $(".btn").attr("disabled",false);
                return;
              }

              var html = "<p style='color:green;font-weight: bold;'>"+res.msg+"</p>";
              var data = res.data;
              if(data.length==0){
                html += "<p>未获取到数据，请检查规则</p>";
              }else {
                html += "<p style='color:darkred;font-weight: bold;'>解析数据："+data.length+" 条</p>";
                if($("input[name='id']").val()>0){
                  html += "<button href='javascript:;' onclick='append();' class='btn btn-success btn-sm repwd'>修改数据源</button>";
                }else{
                  html += "<button href='javascript:;' onclick='append();' class='btn btn-success btn-sm repwd'>添加到数据源</button>";
                }

                for (let datum of data) {
                  html += "<p>名称："+datum.title+"<br/>地址："+datum.url+"<br/>时间："+datum.timecreate+"<br/>图片："+datum.img+"<br/>简介："+datum.remark+"<br/>===========================</p>";
                }
              }

              $("#result").html(html);
              $(".btn").attr("disabled",false);
            })
          })
        })

        function append() {
          var title = $("#title").val();
          if(""==title)return alert("请输入数据源名称");
          if(!confirm("是否提交 ?"))return false;

          var sites = {};
          sites.id = $("input[name='id']").val();
          sites.title = $("input[name='title']").val();
          sites.url = $("input[name='url']").val();
          sites.regex = JSON.stringify(getParse());

          $.post("/sites/appendsite",sites,function (res) {
            if(0==res.code){
              return layer.msg(res.msg,{icon:0});
            }
            layer.msg(res.msg, {icon: 1},function () {
              location.href="/sites/index";
            })
          })
        }

        function getParse(){
          var parse = {};
          parse.cell = $("#regex").val();
          parse.charset = $("select[name='charset']").val();
          parse.title_name = $("input[name='title_name']").val();
          parse.title_value = $("input[name='title_value']").val();
          parse.url_name = $("input[name='url_name']").val();
          parse.url_value = $("input[name='url_value']").val();
          parse.time_name = $("input[name='time_name']").val();
          parse.time_value = $("input[name='time_value']").val();
          parse.img_name = $("input[name='img_name']").val();
          parse.img_value = $("input[name='img_value']").val();
          parse.remark_name = $("input[name='remark_name']").val();
          parse.remark_value = $("input[name='remark_value']").val();

          return parse;
        }
      </script>
  </body>
</html>
